<!--
3D特点
    1）近大远小
    2）物体后面被遮挡，不可见

2D可以实现近大远小效果，
而3D在2D基础上增加了三维立体环境效果（也就是可以遮挡后面的物体，让其不可见）


3D旋转之：3D呈现
    - 呈现（保持、开启）三维立体环境
    - 给父容器添加

    transform-style
        - preserve-3d   保持3D立体效果
        - flat          2D平面效果（默认）

特别注意一点：
  不管是添加近大远小（透视），还是开启三维立体环境（3D环境），
  最好只给【最近一级】父元素设置，不是爷爷辈等祖先元素，
  视频中讲的应该是错的，查阅can i use官网后发现不是浏览器兼容问题

经过验证的小结：
  透视（提供近大远小效果）
      perspective       可以给祖先级元素，但可能会重叠（选择给父级或父父级，二选一）
  3D环境（提供三维立体环境）
      transform-style   只能给最近一级父元素（也就是给子元素提供3D环境）
若父元素也要这两个效果，那就给父级的父级（爷爷辈）也添加，注意“也”字

在3D转换中一般都会一起设置的，但不是绝对的，
因为有时只要透视不要3D环境，有时只要3D环境不要透视，记得按需设置即可。
-->

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .one {
    /* 父相 */
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px auto;
    background-color: rgba(0, 0, 0, 0.3);
    /* 透视 */
    perspective: 200px;
    /* 呈现3D立体 */
    transform-style: preserve-3d;
    transition: all 2s;
  }
  .one:hover {
    transform: rotateY(-180deg);
  }
  .two,
  .three {
    /* 子绝 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* 写在这里的transform会被层叠性覆盖掉 */
    /* transform: translate(-50%, -50%); */
    margin-top: -50px;
    margin-left: -50px;
  }
  .two {
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotateX(30deg) rotateY(-30deg);
  }
  .three {
    width: 100px;
    height: 100px;
    background-color: blue;
    transform: rotateZ(30deg) rotateX(-45deg);
  }
</style>

<div class="one">
  <div class="two"></div>
  <div class="three"></div>
</div>
